import React from "react";
import { Typography, Card, Row, Col, message } from "antd";

import "./index.less";
import { otherToolsData } from "../../components/Constant";

const { Title, Paragraph } = Typography;

const OtherTools: React.FC = () => {
  const [messageApi, contextHolder] = message.useMessage();
  return (
    <div className="other-tools-container">
      {contextHolder}
      <Typography>
        <Title level={2}>其他工具</Title>
        <Paragraph>
          这里提供了一系列实用的其他工具，帮助您更高效地处理事务。
        </Paragraph>
      </Typography>

      <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
        {otherToolsData.map((tool, index) => (
          <Col xs={24} sm={12} md={8} lg={6} key={index}>
            <Card
              hoverable
              className="tool-card"
              title={
                <div style={{ display: "flex", alignItems: "center" }}>
                  <span className="tool-icon">{tool.icon}</span>
                  <span>{tool.title}</span>
                </div>
              }
              onClick={() => {
                if (tool.isDeveloping) {
                  messageApi.open({
                    type: "warning",
                    content: "该工具正在开发中，敬请期待！",
                  });
                } else {
                  window.location.href = tool.link || "";
                }
              }}
            >
              <p>{tool.description}</p>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default OtherTools;
